<template>
  <div>
    <div class="news">
      <div class="news-1">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入证书编号或姓名"></el-input>
          </el-form-item>
          <!--                    <el-form-item label="证书编号" prop="number">-->
          <!--                        <el-input v-model="ruleForm.number"></el-input>-->
          <!--                    </el-form-item>-->
          <el-button
            type="primary"
            style="margin-bottom: 22px;margin-left:30px"
            @click.native.prevent="onQuery"
          >查询
          </el-button
          >
        </el-form>
      </div>
      <div class="news-2">
        <el-table :data="newsList" border style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="number"
            label="证书编号"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {

      const validateName = (rule, value, callback) => {
        if (this.isEmpty(value)) {
          callback(new Error("请输入证据编号或姓名"));
        } else {
          callback();
        }
      };
      // const validateCer = (rule, value, callback) => {
      //     if (this.isEmpty(value)) {
      //         callback(new Error("请输入证据编号"));
      //     } else {
      //         callback();
      //     }
      // };
      return {
        newsList: [],
        ruleForm: {},
        rules: {
          name: [
            {
              required: true,
              trigger: "blur",
              validator: validateName,
            },
          ],
          // number: [
          //     { required: true, trigger: "blur", validator: validateCer },
          // ],
        },
      };

    },
    props: {
      topIndex: {
        type: Number,
        default: 0,
      },
    },
    watch: {
      topIndex(val) {
        this.newsList = []
        this.ruleForm.name = ''
        this.$refs.ruleForm.resetFields()
      },

    },
    filters: {
      pattime(value) {
        return value.slice(0, 10);
      },
    },
    created() {
    },
    methods: {
      onQuery() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$store
              .dispatch("news/getTrainQuery", this.ruleForm)
              .then((res) => {
                this.newsList = []
                this.newsList = [...res];
              })
              .catch((e) => {
                console.log(e);
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      isEmpty(value) {
        return (
          value === undefined ||
          value === null ||
          (typeof value == "object" && Object.keys(value).length === 0) ||
          (typeof value == "string" && value.trim().length === 0)
        );
      },
    },
  };
</script>

<style scoped>
  .news {
    padding: 20px 0;
  }

  .demo-ruleForm {
    display: flex;
    align-items: center;
  }
</style>
